<template>
    <view>
        <!-- components/hot/index.wxml -->

        <view class="hot">
            <!-- 外层 -->
            <view class="hot-layer" v-for="(item, index) in hotData" :key="index">
                <!-- photo -->

                <view class="hot-banner" @tap="goodsDetail($event, { goods_id: item.goods_id })" :data-goods_id="item.goods_id">
                    <swiper :indicator-dots="true" indicator-color="rgba(0,0,0,0.5)" indicator-active-color="rgba(255,255,255,1.00)" :autoplay="true" class="hot-banner-swiper">
                        <swiper-item v-for="(value, idx) in item.goods_photo" :key="value.idx">
                            <image :src="value" class="hot-banner-img"></image>
                        </swiper-item>
                    </swiper>
                </view>

                <!-- vip -->

                <view class="hot-vip">
                    <view class="hot-vip-left">
                        <view class="hot-vip-left-img">
                            <image :src="imgUrl + '/imgs/award.png'"></image>
                        </view>
                        <view class="hot-vip-left-text">奖￥{{ item.goods_return_money }}</view>
                    </view>
                    <view class="hot-vip-right">
                        <view class="hot-vip-right-text">最高可赚</view>
                        <view class="hot-vip-right-price">￥{{ item.goods_return_money + item.goods_top_money }}</view>
                        <view class="hot-vip-right-btn" @tap="open_vip">
                            <view class="hot-vip-right-btn-text">开通会员</view>
                            <view class="hot-vip-right-btn-img"><image :src="imgUrl + '/imgs/vip.png'"></image></view>
                        </view>
                    </view>
                </view>

                <!-- detail -->

                <view class="hot-detail">
                    <view class="hot-detail-title" @tap="goodsDetail($event, { goods_id: item.goods_id })" :data-goods_id="item.goods_id">{{ item.goods_title }}</view>

                    <view class="hot-detail-price" @tap="goodsDetail($event, { goods_id: item.goods_id })" :data-goods_id="item.goods_id">
                        <view class="hot-detail-price-discounts">{{ item.goods_bazaar_price }}</view>
                        <view class="hot-detail-price-original">{{ item.goods_original_price }}</view>
                    </view>

                    <view class="hot-detail-address" @tap="goodsDetail($event, { goods_id: item.goods_id })" :data-goods_id="item.goods_id">
                        <view class="hot-detail-address-info">
                            <view class="hot-detail-address-info-img"><image :src="imgUrl + '/imgs/address.png'"></image></view>
                            <view class="hot-detail-address-info-address">{{ address.street_number ? address.street_number : '暂无地址信息' }}</view>
                        </view>
                        <view class="hot-detail-address-moods" v-if="item.is_near_order">
                            <view class="hot-detail-address-moods-img"><image :src="imgUrl + '/imgs/moods.png'"></image></view>
                            <view class="hot-detail-address-moods-dist">附件10KM都在买</view>
                        </view>
                    </view>

                    <view class="hot-detail-text" @tap="goodsDetail($event, { goods_id: item.goods_id })" :data-goods_id="item.goods_id">
                        {{ item.goods_text }}
                    </view>

                    <!-- 推荐理由 -->
                    <view class="hot-detail-edit" v-if="isEdit" @tap="edit_text">
                        <view class="hot-detail-edit-img">
                            <image :src="imgUrl + '/imgs/user/recommend/edit.png'"></image>
                        </view>
                        <view class="hot-detail-edit-text">编辑我的推荐理由</view>
                    </view>

                    <view class="hot-detail-handle">
                        <view class="hot-detail-handle-read">{{ item.goods_read_count }} 已读</view>
                        <view
                            class="hot-detail-handle-up"
                            @tap="upOrCollect($event, { type: '2', goods_id: item.goods_id, goods_index: index })"
                            data-type="2"
                            :data-goods_id="item.goods_id"
                            :data-goods_index="index"
                        >
                            <view class="hot-detail-handle-up-img">
                                <image :src="imgUrl + '/imgs/goods/' + (item.is_up ? '' : 'not-') + 'goods_up.png'"></image>
                            </view>
                            <view class="hot-detail-handle-up-number">{{ item.goods_up_count }}</view>
                        </view>
                        <view
                            class="hot-detail-handle-collect"
                            @tap="upOrCollect($event, { type: '1', goods_id: item.goods_id, goods_index: index })"
                            data-type="1"
                            :data-goods_id="item.goods_id"
                            :data-goods_index="index"
                        >
                            <view class="hot-detail-handle-collect-img">
                                <image :src="imgUrl + '/imgs/goods/' + (item.is_collect ? '' : 'not-') + 'goods_then_collect.png'"></image>
                            </view>
                            <view class="hot-detail-handle-collect-number">{{ item.goods_collect_count }}</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 推荐理由 -->

        <view class="hot-edit" v-if="editShow">
            <view class="hot-edit-text">
                <view class="hot-edit-text-title">推荐理由</view>
                <view class="hot-edit-text-input">
                    <textarea placeholder="请输入推荐理由" @input="input_edit" :value="editText"></textarea>
                </view>
                <view class="hot-edit-text-but">
                    <view class="hot-edit-text-but-cancel" @tap="cancel_edit">取消</view>
                    <view class="hot-edit-text-but-confirm" @tap="confirm_edit">确定</view>
                </view>
            </view>
        </view>
        <view class="list-end" v-if="isEnd == 'end'">已经到底啦</view>
    </view>
</template>

<script>
// components/hot/index.js
const Config = require('../../config/index.js');

export default {
    data() {
        return {
            imgUrl: Config.imgUrl,

            //图片url
            editShow: false,

            //用户-是否显示理由推荐
            //用户-推荐理由
            editText: '',

            value: {
                idx: ''
            }
        };
    },
    /**
     * 组件的属性列表
     */
    props: {
        hotData: {
            type: Array,
            default: () => []
        },
        isMember: {
            type: Boolean,
            default: false
        },
        address: {
            type: Object,
            default: () => ({})
        },
        isEdit: {
            type: Boolean,
            default: false
        },
        //是否加载完成
        isEnd: {
            type: String,
            default: 'start'
        }
    },
    /**
     * 组件的方法列表
     */
    methods: {
        edit_text(e, _dataset) {
            
            if (!e.currentTarget) {
                if (_dataSet.tagId) {
                    e.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    e.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
            
            //编辑
            this.setData({
                editShow: true
            });
        },

        cancel_edit(e, _dataset) {
            
            if (!e.currentTarget) {
                if (_dataSet.tagId) {
                    e.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    e.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
            
            //取消
            this.setData({
                editShow: false
            });
        },

        confirm_edit(e, _dataset) {
            
            if (!e.currentTarget) {
                if (_dataSet.tagId) {
                    e.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    e.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
            
            //确定
            this.setData({
                editShow: false
            });
            var data = {
                text: this.editText,
                goodsId: 1
            };
            this.$emit('events', {
                detail: data
            });
        },

        input_edit(e, _dataset) {
            
            if (!e.currentTarget) {
                if (_dataSet.tagId) {
                    e.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    e.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
            
            //理由输入
            this.setData({
                editText: e.detail.value
            });
        },

        upOrCollect: function (e, _dataset) {
            
            if (!e.currentTarget) {
                if (_dataSet.tagId) {
                    e.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    e.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
            
            var json = {
                goods_id: e.currentTarget.dataset.goods_id,
                index: e.currentTarget.dataset.goods_index,
                type: e.currentTarget.dataset.type //类型 1收藏 2点赞
            };
            this.$emit(
                'collect',
                {
                    detail: json
                },
                {}
            );
        },

        goodsDetail(e, _dataset) {
            
            if (!e.currentTarget) {
                if (_dataSet.tagId) {
                    e.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    e.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
            
            // 商品详情
            uni.navigateTo({
                url: '/pages/goodsDetail/index?id=' + e.currentTarget.dataset.goods_id
            });
        },

        open_vip(e, _dataset) {
            
            if (!e.currentTarget) {
                if (_dataSet.tagId) {
                    e.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    e.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
            
            //vip
            uni.navigateTo({
                url: '/pages/user/vip/index'
            });
        }
    }
};
</script>
<style>
@import './index.css';
</style>
